<template>
  <Container class="manage-list">
    <div class="container-header group" slot="header">
        <!-- <Select
          v-model="username"
          clearable
          class="nodyfy"
          @on-change="onSelectList"
          
          >
          <Option v-for="item in CompanyList"
            :value="item.id" :key="item.id">{{ item.value }}
          </Option>
        </Select> -->
      <!-- <Button type="primary" icon="ios-search" class="btn-search" @click="onSearchBtnClick"></Button> -->
    </div>
    <Tabs v-model="tab">
      <!-- <div slot="extra" class="flex-start nodyfy">
        <div class="label">切换公司</div>
        <Select
          v-model="value"
          clearable
          @on-change="onSelectAreaList"
          
          >
          <Option v-for="item in CompanyList"
            :value="item.id" :key="item.id">{{ item.value }}
          </Option>
        </Select>
      </div> -->
      <TabPane label="邀请">
        <Table 
          :height="options.tableHeight" 
          stripe
          :columns="list.columns"
          :data="list.data" 
          no-data-text="亲，没有找到相关记录哦！~"></Table>
        <div class="pager">
          <Page 
          :total="list.totalItem" 
          :current="list.currentPage"
          :page-size="list.pageSize"
          @on-change="onPageChange"
          @on-page-size-change="onPageSizeChange"
          show-sizer 
          placement="top"></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import table from '@/table'
import AccountListData from './list/TeamListData'
import { clearEmpty } from '@/util'
export default {
  name: 'setting/account/list',
  data() {
    return {
      list: AccountListData,
      username: '',
      options: {
        tableHeight: 300
      },
      CompanyList: ''
    }
  },
  mounted() {
		this.list.currentPage = this.$route.query.currentPage || 1
    this.list.pageSize = this.$route.query.pageSize || this.list.pageSize
    this.initTable()
    this.$bus.$on('onEdit', ({ id }) => this.onEdit(id))
    this.$bus.$on('onDelete', this.onDelete)
    if (this.$route.query.id) this.getCompany()
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1
      this.getData()
    },
    onSelectList() {
      this.list.currentPage = 1
      this.getData()
    },
    getCompany() {
      this.$ajaxGet("/order/inviteStaffCompany", { order_id: this.$route.query.id }).then(data => {
        this.CompanyList = data.map(item => {
          return {
            id: item.id,
            value: item.company_name
          }
        })
        this.username = this.CompanyList[0].id
        this.getData()
      })
    },
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        // username: this.username,
        order_id: this.$route.query.id,
        company_id: this.username
      }
      param = clearEmpty(param)
      this.list.status = 'loading'
      this.$ajaxGet('/order/requireStaffList', param).then(data => {
        this.list.data = (data.data || []).map(item => {
          return {
            userName: item.user.userName,
            real_name: item.user.real_name,
            nickName: item.user.nickName,
            company_name: item.company_name,
            creation_time: item.creation_time,
            type: item.type,
            is_profession: item.is_profession,
            status: item.status,
            isAdministrator: item.isAdministrator,
            company_id: item.company_id,
            user_id: item.user_id,
            isAdministrator: item.isAdministrator
          }
        })
        this.list.totalItem = Number(data.total)
        this.backTableTop()
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onAddAccount() {
      this.$router.push('/setting/account/edit')
    },
    onPageChange(number) {
			this.list.currentPage = number
			this.$router.push({
				name: 'order/order/invitation',
				query: {
					currentPage: this.list.currentPage,
					pageSize: this.list.pageSize,
          id: this.$route.query.id,
				}
			})
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
			this.list.pageSize = pageSize
			this.$router.push({
				name: 'order/order/invitation',
				query: {
					currentPage: this.list.currentPage,
					pageSize: this.list.pageSize,
          id: this.$route.query.id,
				}
			})
    },
    onEdit(item) {
      this.$Modal.confirm({
        title: '邀请',
        content: '确定邀请当前账号？',
        onOk: () => {
          this.$jsonPost('/order/applyEmploy', {company_id: item.company_id, order_id: this.$route.query.id, user_id: item.user_id}).then(() => {
            this.$Notice.success({
              title: '邀请成功',
              desc: `<span class="font-red"></span> 已被邀请。`
            })
            this.getData()
          })
        }
      })
    },
    onDelete(id, name) {
      this.$Modal.confirm({
        title: '删除',
        content: '确定删除当前账号？',
        onOk: () => {
          this.$ajaxGet('/supplier/supplier_user/remove/' + id).then(() => {
            this.$Notice.success({
              title: '删除成功',
              desc: `<span class="font-red">${name}</span> 已被删除。`
            })
            this.getData()
          })
        }
      })
    }
	},
	watch: {
		$route() {
			let page = this.$route.query.currentPage
			let table = this.list
			if (table.currentPage !== page) {
				table.currentPage = this.$route.query.currentPage === 0 ? 1 : this.$route.query.currentPage
			}
      this.getData()
		}
	}
}
</script>
<style lang="less">
.base .container-header.group .ivu-select {
  width: 400px;

}
  .manage-list {
    .nodyfy {
      .label {
        width: 100px;
      }
    }
  }
</style>
